<template>
  <div class="device-detail">
    <div class="detail-top">
      <div class="device-icon">
        <img :src="getDeviceIcon(deviceData.icon)" style="width: 100%;height: 100%;" alt="">
      </div>
      <div class="device-name">{{deviceData.name}}</div>
      <div class="device-info">
        <div class="info-item">
          <div class="info-item-key">{{$t('deviceDetail.label.status')}}</div>
          <div class="info-item-value">{{deviceData.inline===1?$t('deviceDetail.label.online'):$t('deviceDetail.label.offline')}}</div>
        </div>
        <div class="info-item" v-if="deviceData.signal">
          <div class="info-item-key">{{$t('deviceDetail.label.signal')}}</div>
          <div class="info-item-value">{{ deviceData.signal }}dBm</div>
        </div>
        <div class="info-item" v-if="deviceData.battery" >
          <div class="info-item-key">{{$t('deviceDetail.label.remainingCapacity')}}</div>
          <div class="info-item-value">{{deviceData.battery}}%</div>
        </div>
        <div class="info-item">
          <div class="info-item-key">{{$t('deviceDetail.label.refreshCache')}}</div>
          <div class="info-item-value"><el-button icon="el-icon-refresh" size="mini" @click="handleRefreshCache"></el-button></div>
        </div>
        <!-- <div class="info-item">
          <div class="info-item-key">删除配置</div>
          <div class="info-item-value"><el-button icon="el-icon-remove" size="mini" @click="handleDeleteTaskConfig"></el-button></div>
        </div> -->
      </div>
    </div>
    <div class="detail-main">
      <div class="main-nav">
        <el-menu default-active="1" @select="handleSelect">
          <el-menu-item index="1">
            <i class="el-icon-chat-dot-square"></i>
            <span slot="title">{{$t('deviceDetail.label.deviceInfo')}}</span>
          </el-menu-item>
          <el-menu-item index="6">
            <i class="el-icon-s-operation"></i>
            <span slot="title">{{$t('deviceDetail.label.realTimeParams')}}</span>
          </el-menu-item>
          <el-menu-item index="7">
            <i class="el-icon-data-line"></i>
            <span slot="title">{{$t('deviceDetail.label.powerTrend')}}</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-sort"></i>
            <span slot="title">{{$t('deviceDetail.label.status')}}</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-warning-outline"></i>
            <span slot="title">{{$t('deviceDetail.label.deviceAlarm')}}</span>
          </el-menu-item>
          <el-menu-item index="8">
            <i class="el-icon-document"></i>
            <span slot="title">{{$t('deviceDetail.label.operatorLog')}}</span>
          </el-menu-item>
          <!-- <el-menu-item index="5" v-hasPermi="['data:deviceData:admin']">
            <i class="el-icon-s-order"></i>
            <span slot="title">离线任务</span>
          </el-menu-item> -->
          <!-- <el-menu-item index="6" v-hasPermi="['data:deviceData:admin']">
            <i class="el-icon-s-order"></i>
            <span slot="title">modbus配置</span>
          </el-menu-item> -->
          <!-- <el-menu-item index="5">
            <i class="el-icon-link"></i>
            <span slot="title">解绑</span>
          </el-menu-item> -->
        </el-menu>
      </div>
      <div class="main-body">
        <transition name="slide-fade">
          <el-tabs v-if="activeNav==1"  v-model="activeName" >
            <el-tab-pane :label="$t('deviceDetail.label.basicInfo')" name="first">
              <div class="weather-box">
                <div class="weather-icon">
                  <img style="width: 100%;height: 100%;" :src="getSensorIcon('rainfall')" alt="">
                </div>
                <!-- <div class="weather-msg">
                  <div>雨 23°C</div>
                  <div>17°C ~ 24°C</div>
                  <div>南风1级1km/h空气质量：19</div>
                </div> -->
              </div>
              <div class="info-box">
                <el-descriptions title="" :column="2"  size="medium ">
                  <el-descriptions-item :label="$t('deviceDetail.device.name')">{{deviceData.name}}</el-descriptions-item>
                  <el-descriptions-item :label="$t('deviceDetail.device.version')">{{deviceData.version}}</el-descriptions-item>
                  <el-descriptions-item :label="$t('deviceDetail.device.companyName')">{{deviceData.companyName}}</el-descriptions-item>
                  <el-descriptions-item :label="$t('deviceDetail.device.deliveryTime')">{{deviceData.createTime}}</el-descriptions-item>
                  <el-descriptions-item :label="$t('deviceDetail.device.offlineTime')">{{deviceData.offlineTime}}</el-descriptions-item>
                  <el-descriptions-item :label="$t('deviceDetail.device.onlineTime')">{{deviceData.inlineTime}}</el-descriptions-item>
                  <!-- <el-descriptions-item label="上次在线时间">2023/08/03 11:51:21</el-descriptions-item> -->
                  <el-descriptions-item :label="$t('deviceDetail.device.deviceAddress')">{{deviceData.address}}</el-descriptions-item>
                </el-descriptions>
              </div>
              <div class="setting-box" v-if="false">
                <div class="setting-item">
                  <div class="item-box">
                    <div class="setting-title">设置</div>
                    <div class="setting-btn">
                      <el-button size="small" type="primary" >确定</el-button>
                    </div>
                  </div>
                </div>
                <div class="setting-item">
                  <div class="item-box">
                    <div class="setting-title">设置</div>
                    <div class="setting-btn">
                      <el-switch
                        v-model="value"
                        active-color="#03C2C2"
                        inactive-color="#dcdfe6">
                      </el-switch>
                    </div>
                  </div>
                </div>
                <div class="setting-item">
                  <div class="item-box">
                    <div class="setting-title">设置</div>
                    <div class="setting-btn">
                      <el-button size="small" type="primary" >确定</el-button>
                    </div>
                  </div>
                </div>
                <div class="setting-item">
                  <div class="item-box">
                    <div class="setting-title">设置</div>
                    <div class="setting-btn">
                      <el-switch
                        v-model="value"
                        active-color="#03C2C2"
                        inactive-color="#dcdfe6">
                      </el-switch>
                    </div>
                  </div>
                </div>
                <div class="setting-item">
                  <div class="item-box">
                    <div class="setting-title">设置</div>
                    <div class="setting-btn">
                      <el-button size="small" type="primary" >确定</el-button>
                    </div>
                  </div>
                </div>
                <div class="setting-item">
                  <div class="item-box">
                    <div class="setting-title">设置</div>
                    <div class="setting-btn">
                      <el-switch
                        v-model="value"
                        active-color="#03C2C2"
                        inactive-color="#dcdfe6">
                      </el-switch>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            
            <el-tab-pane :label="$t('deviceDetail.label.deviceDetail')" name="second">
              <div class="device-form">
                <el-form :model="form" :rules="rules" status-icon  ref="form" label-width="120px" class="demo-ruleForm">
                  <el-form-item :label="$t('deviceDetail.detail.icon')" prop="pass">
                    <div class="form-icon" @click.stop="selectDeviceIcon">
                      <img style="width: 100%;height: 100%;cursor: pointer;" :src="getDeviceIcon(form.icon)" alt="">
                    </div>
                  </el-form-item>
                  <el-form-item :label="$t('deviceDetail.detail.name')" prop="name">
                    <el-input type="text" v-model="form.name" style="width: 630px;"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('deviceDetail.detail.code')" prop="code">
                    <el-input v-model="form.code" disabled style="width: 630px;"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('deviceDetail.detail.type')" prop="deviceTypeName">
                    <el-input v-model="form.deviceTypeName" disabled style="width: 630px;"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('deviceDetail.detail.group')" prop="deptId">
                    <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" :placeholder="$t('deviceDetail.detail.groupPlaceholder')" style="width: 630px;"/>
                  </el-form-item>
                  <el-form-item :label="$t('deviceDetail.detail.address')" prop="address">
                    <el-input v-model="form.address" style="width: 630px;">
                      <el-button slot="append" @click="POISearchDialog">{{$t('deviceDetail.detail.selectAddress')}}</el-button>
                    </el-input>
                  </el-form-item>
                  <el-form-item :label="$t('deviceDetail.detail.longitude')" prop="longitude">
                    <el-input v-model="form.longitude" style="width: 630px;"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('deviceDetail.detail.latitude')" prop="latitude">
                    <el-input v-model="form.latitude" style="width: 630px;"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('deviceDetail.detail.imei')" prop="imei">
                    <el-input v-model="form.imei" disabled style="width: 630px;"></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="硬件版本" prop="hardwareVersion">
                    <el-input v-model="form.hardwareVersion" disabled style="width: 630px;"></el-input>
                  </el-form-item> -->
                  <el-form-item :label="$t('deviceDetail.detail.version')" prop="version">
                    <el-input v-model="form.version" disabled style="width: 630px;"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary"  @click="handleUpdate" >{{$t('common.confirm')}}</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="$t('deviceDetail.label.deviceBattery')" name="fourth">
              <device-battery :deviceId="deviceId" :deviceName="deviceName"></device-battery>
            </el-tab-pane>
            <el-tab-pane :label="$t('deviceDetail.label.deviceTask')" name="five">
              <display-task :deviceId="deviceId"></display-task>
            </el-tab-pane>
            <el-tab-pane :label="$t('deviceDetail.label.offlineTask')" name="six">
              <offline-task :deviceId="deviceId"></offline-task>
            </el-tab-pane>
          </el-tabs>
          <device-status v-if="activeNav==2" :deviceId="deviceId"></device-status>
          <device-alarm v-if="activeNav==3" :deviceId="deviceId"></device-alarm>          
          <monitor v-if="activeNav==6" :deviceId="deviceId" :types="types"></monitor>
          <device-log  :deviceId="deviceId" v-if="activeNav==8"></device-log>
          <div v-if="activeNav==7">
              <el-date-picker ref="datePicker" v-model="chartDateArea" type="daterange"
                 :range-separator="$t('common.to')" :picker-options="pickerOptions" :start-placeholder="$t('common.startDate')" :clearable="false" :end-placeholder="$t('common.endDate')">
              </el-date-picker>
              <el-button size="small" type="primary" @click="getTrendData" >{{$t('common.search')}}</el-button>
              <!-- <el-button size="small" type="primary" style="margin-left: 10px;" @click="downloadTrendData" :disabled="chartData.xData.length == 0">下载</el-button> -->
              <div style="width: 100%;" v-if="activeNav==7" v-loading="chartDataLoading" :element-loading-text="$t('common.loading')" >
                <line-chart :chart-data="chartData" height="600px" style="width: 100%;"></line-chart>
              </div>
          </div>
        </transition>
      </div>
    </div>
    <!-- 设备图标 -->
    <el-dialog :title="$t('deviceData.selectIcon')" :visible.sync="deviceIconOpen" width="800px" append-to-body>
      <div>
        <device-icon :target="form.icon" @change="onDeviceIconChange"></device-icon>
      </div>
    </el-dialog>
    <!-- 选择设备地图 -->
    <el-dialog width="85%" center title="选择经纬度" :visible.sync="innerVisible" :close-on-click-modal="false" append-to-body>
      <div>
        <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
          <!-- <el-input id="tipInput" v-model="poiKeywords" placeholder="请输入搜索名称"> -->
          <div>通过点击地图选择经纬度</div>
          <el-autocomplete class="inline-input" size="small" v-model="poiKeywords" :fetch-suggestions="querySearch"
            placeholder="请输入搜索名称" @select="handleSelectAddress"></el-autocomplete>
        </div>
        <!-- <el-button slot="append" icon="el-icon-search" @click="searchKeyword" style="width:60px"></el-button> -->
        <!-- </el-input> -->
        <div id="mapContainer" ref="mapContainer" style="height:600px"></div>
        <div slot="footer" class="dialog-footer" align="right" style="margin-top:15px">
          <el-button type="primary" @click="confirmSelectAdress(1)">确 定</el-button>
          <el-button @click="confirmSelectAdress(0)">取 消</el-button>
        </div>
    </div>
  </el-dialog>
  </div>
</template>

<script>
import { getDevice,updateDevice,refreshCache,deleteTaskConfig , esTrendData} from "@/api/device/device";
import deviceIcon from '@/components/IconDevice/index'
import deviceLog from '../deviceData/log'
import deviceAlarm from './deviceAlarm'
import deviceStatus from './deviceStatus'
import deviceBattery from './deviceBattery'
import displayTask from './displayTask'
import offlineTask from './offlineTask'
import monitor from '@/views/data/deviceData/monitor'
import lineChart from '@/views/data/deviceData/LineChart'
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import AMapLoader from "@amap/amap-jsapi-loader";
import loadAMap from '@/utils/loadMap';
const mapConfig = {
  securityJsCode: "b23c850a95afb3ca622bedf6efa527df",
  MAPKEY: "9b855993ebffd74a39d44888fff209f7",
};
export default{
  name:'deviceDetail',
  components:{deviceIcon,deviceLog,deviceAlarm,Treeselect,deviceStatus,deviceBattery,displayTask,offlineTask,monitor,lineChart},
  data(){
    return{
      pickerOptions: {
        shortcuts: [{
          text: this.$t('deviceData.dateRange.aWeek'),
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: this.$t('deviceData.dateRange.aMonth'),
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: this.$t('deviceData.dateRange.threeMonth'),
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      chartDateArea:[],
      chartDataLoading:false,
      rules:{
        name: [
          { required: true, message: this.$t('common.cannotbeempty',{name:this.$t('deviceData.popup.name')}), trigger: "blur" }
        ],
        // address: [
        //   { required: true, message: "设备地址不能为空", trigger: "blur" }
        // ],
        // longitude: [
        //   { required: true, message: "经度不能为空", trigger: "blur" }
        // ],
        // latitude: [
        //   { required: true, message: "纬度不能为空", trigger: "blur" }
        // ],
      },
      //传感器图表查询参数
      chartParams:{
        deviceId:undefined,
        startDate:'',
        endDate:'',
        fixedFlags:[]
      },
      //详情charts数据
      chartData:{
        xData:[],
        yData:[]
      },
      deviceId:null,
      deviceName:null ,
      // 部门树选项
      deptOptions: [],
      activeNav:'1',
      activeName:'first',
      types:'second',
      name:'',
      value:'',
      deviceData:{},
      form:{},
      deviceIconOpen:false,
      chartDateArea:[],
      innerVisible:false,
      map:null,
      currentSelectAddress:null,
      poiKeywords:'',
      placeSearch:'',
      autoComplete:''
    }
  },
  created(){
    const title = this.$route.params.name||'设备详情';
    const route = Object.assign({}, this.$route, { title: `${title}` }) 
    this.$store.dispatch('tagsView/updateVisitedView', route)
    this.deviceId = this.$route.query.id;
    this.getDeviceOption()
    this.getTreeselect()
    this.initTrendData()
  },
  mounted(){
    this.initMap()
  },
  methods:{
    initTrendData(){
        //图表数据，默认查询最近一周
        const end = new Date();
        const start = new Date().getTime() - 3600 * 1000 * 24 * 7;
        this.chartDateArea = [start,end];
        this.getTrendData()
    },
    async initMap() {
      const AMap = await loadAMap()
      this.map = new AMap.Map(this.$refs.mapContainer, {
        resizeEnable: true,
        zoom: 16, //初始化地图级别
        showIndoorMap: false,
      })
      AMap.plugin(['AMap.Scale', 'AMap.ToolBar', 'AMap.ControlBar'], () => {
        const Scale = new AMap.Scale()
        const toolBar = new AMap.ToolBar({
          position: 'RB',
          offset: new AMap.Pixel(150, 220)
        })
        const controlBar = new AMap.ControlBar()
        // const geolocation = new AMap.Geolocation({
        //   // 是否使用高精度定位，默认：true
        //   enableHighAccuracy: true,
        //   // 设置定位超时时间，默认：无穷大
        //   timeout: 10000,
        //   // 定位按钮的停靠位置的偏移量
        //   offset: [20, 100],
        //   //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        //   zoomToAccuracy: true,
        //   //  定位按钮的排放位置,  RB表示右下
        //   position: "RB",
        // });
        this.map.addControl(controlBar)
        this.map.addControl(toolBar)
        this.map.addControl(Scale)
      })
    },
    getDeviceOption(){
      getDevice(this.deviceId).then(res => {
        //处理设备数据
        this.deviceData = res.data;
        this.deviceName = this.deviceData.name
        this.form = JSON.parse(JSON.stringify(res.data));
      })
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    handleSelect(event){
      if(event==10){
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
        return
      }else{
        this.activeNav = event
      }
    },
    //选择设备icon
    selectDeviceIcon(){
      this.deviceIconOpen = true;
    },
    onDeviceIconChange(value){
      this.form.icon = value;
      this.deviceIconOpen = false;
    },
    //保存
    handleUpdate(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateDevice(this.form).then(res=>{
            this.$modal.msgSuccess("保存成功");
            this.getDeviceOption()
          })
        }})
    },
    //刷新缓存
    handleRefreshCache(){
      refreshCache(this.form)
    },
    //清除任务配置
    handleDeleteTaskConfig(){
      deleteTaskConfig(this.form.id)
    },
    POISearchDialog() {
      let _this = this;
      this.innerVisible = true
      this.currentSelectAddress = null
      this.poiKeywords = ''
      this.$nextTick(async () => {
        const AMap = await AMapLoader.load({
          key: mapConfig.MAPKEY, // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.Geolocation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        });

        this.map = new AMap.Map(this.$refs.mapContainer, {
          //设置地图容器id
          viewMode: "3D", //是否为3D地图模式
          zoom: 12, //初始化地图级别
          // center: [116.405467, 39.907761], //初始化地图中心点位置
        });
        AMap.plugin(['AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geolocation'], () => {
          var geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 10000,
            // 定位按钮的停靠位置的偏移量
            offset: [10, 20],
            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            zoomToAccuracy: true,
            //  定位按钮的排放位置,  RB表示右下
            position: 'RB'
          })

          function onComplete(res) {
            const pointer = [res.position.lng, res.position.lat]
            // data是具体的定位信息
            _this.map.setCenter(pointer);
          }

          function onError(res) {
            // 定位出错
            console.error(res.message)
          }
          geolocation.getCurrentPosition(function (status, result) {
            if (status == 'complete') {
              onComplete(result)
            } else {
              onError(result)
            }
          });
          var autoOptions = {
            //city 限定城市，默认全国
            city: '广州',
            input: "tipinput"
          };
          // 实例化AutoComplete
          const geocoder = new AMap.Geocoder()
          this.autoComplete = new AMap.AutoComplete(autoOptions);
          this.placeSearch = new AMap.PlaceSearch({
            pageSize: 10, // 单页显示结果条数
            pageIndex: 1, // 页码
            map: this.map, // 展现结果的地图实例
            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
          });
          this.placeSearch.on('markerClick', (e) => {
            const { location } = e.data
            geocoder.getAddress(location, (status, result) => {
              if (status === 'complete' && result.regeocode) {
                const { addressComponent } = result.regeocode
                addressComponent.location = location
                this.currentSelectAddress = result.regeocode
              }
            })
          })
          // 监听鼠标点击地图点，生成marker
          this.map.on('click', (ev) => {
            if (this.currentMarker) {
              this.map.remove(this.currentMarker);
            }
            const { lng, lat } = ev.lnglat
            var marker = new AMap.Marker({
              icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
              position: [lng, lat],
              offset: new AMap.Pixel(-10, -27),
            });
            this.currentMarker = marker
            this.map.add(marker);
            geocoder.getAddress(ev.lnglat, (status, result) => {
              if (status === 'complete' && result.regeocode) {
                const { addressComponent } = result.regeocode
                addressComponent.location = ev.lnglat
                this.currentSelectAddress = result.regeocode
              }
            })
          });
        })
      })

    },
    confirmSelectAdress(type) {
      // 确定
      if (type === 1) {
        if (this.currentSelectAddress) {
          const result = this.currentSelectAddress
          console.log(result)
          const { formattedAddress, addressComponent } = result
          const { location, province, city, district } = addressComponent
          this.form.longitude = location.lng
          this.form.latitude = location.lat
          this.form.address = formattedAddress
        }
      }
      this.innerVisible = false
    },
    querySearch(queryString, cb) {
      this.autoComplete.search(queryString, (status, result) => {
        var tips = result.tips || [];
        tips = tips.map(it => {
          it.value = it.name
          return it
        })
        // 调用 callback 返回建议列表的数据
        cb(tips);
      })
    },
    handleSelectAddress(item){
      this.placeSearch.setCity(item.adcode);
      this.placeSearch.search(item.name);
    },
    //获取传感器图表数据
    getTrendData(){
      this.chartDataLoading = true;
      this.chartParams.deviceId = this.deviceId ;
      this.chartParams.fixedFlags = ['chargeStatus']
      if(this.chartDateArea&&this.chartDateArea.length>0){
        this.chartParams.startDate = this.parseTime(this.chartDateArea[0],'{y}-{m}-{d}')+' 00:00:00'
        this.chartParams.endDate = this.parseTime(this.chartDateArea[1],'{y}-{m}-{d}')+' 23:59:59'
      }else{
        this.chartParams.startDate = '';
        this.chartParams.endDate = '';
      }
      this.chartData = {
        xData:[],
        yData:[]
      }
      esTrendData(this.chartParams).then(res=>{
        this.chartDataLoading = false;
        let xData = [];
        let yData = [];
        res.forEach(el=>{
          xData.push(el.createTime)
          yData.push(el.displayValue)
        })
        this.chartData = {
          xData,yData
        }
      }).catch(()=>{
        this.chartDataLoading = false;
      })
    },
  }
}
</script>


<style lang="scss" scoped >
  ::v-deep{
    .el-menu{
      border: none;
    }
  }
  .device-detail{
    .detail-top{
      width: 98%;
      height: 96px;
      border: 1px solid #e4e7ed;
      border-radius: 5px;
      margin:20px auto;
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      flex-wrap: nowrap;
      .device-icon{
        width: 56px;
        height: 56px;
        flex: 0 0 auto;
      }
      .device-name{
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        margin-left: 10px;
        font-size: 20px;
        color: #03C2C2;
      }
      .device-info{
        flex: 0 0 auto;
        display: flex;
        flex-wrap: nowrap;
        .info-item{
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          width: 100%;
          >div{
            height: 50%;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 8px;
          }
          .info-item-key{
            font-size: 14px;
          }
          .info-item-value{
            font-size: 20px;
            min-width: 40px;
          }
        }
      }
    }
    .detail-main{
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      .main-nav{
        flex: 0 0 auto;
        width: 230px;
        padding: 10px;
        height: 100%;
      }
      .main-body{
        flex: 1;
        padding-right: 20px;
        .weather-box{
          width: 100%;
          height: 66px;
          background-color: #03C2C2;
          border-radius: 5px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .weather-icon{
            width: 50px;
            height: 50px;
            margin-left: 15px;
          }
          .weather-msg{
            margin-left: 10px;
            color: #fff;
            font-size: 13px;
          }
        }
        .info-box{
          width: 100%;
          padding: 20px;
          border: 1px solid rgba(228, 231, 237,0.6);
          border-radius: 5px;
          box-shadow: 0 0 12px rgba(0, 0, 0, .1);
          margin: 10px auto 0px;
        }
        .setting-box{
          padding: 0;
          display: flex;
          flex-wrap: wrap;
          margin-left: -5px;
          margin-right: -5px;
          box-sizing: border-box;
          .setting-item{
            max-width: 25%;
            flex: 0 0 25%;
            padding: 0 5px;
            margin: 10px 0 5px;
            .item-box{
              width: 100%;
              border: 1px solid rgba(228, 231, 237,1);
              border-radius: 6px;
              height: 200px;
              padding: 20px;
              &:hover{
                box-shadow: 0 0 12px rgba(0, 0, 0, .1);
              }
              .setting-title{
                text-align: center;
                font-size: 16px;
                color: #222;
              }
              .setting-btn{
                text-align: center;
                margin-top: 100px;
              }
            }
          }
        }
        .device-form{
          .form-icon{
            width: 40px;
            height: 40px;
            display: inline-block;
          }
        }
      }
    }
  }
  .slide-fade-enter-active {
    transition: all .3s ease-in-out;
  }
  .slide-fade-leave-active {
    transition: all .2s linear;
  }
  .slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(0px);
    opacity: 0;
  }
</style>